<template>
  <div class="login_container">
    <div class="login_form">
        <div class="top">
          <img src="@/assets/images/013.jpg" alt="">
      </div>
      <h2>用户管理</h2>
      <el-form ref="loginForm" :model="loginForm" :rules="validateRules">
        <el-form-item prop="username">
          <el-input  
              prefix-icon="iconfont icon-tubiao211"  
              v-model="loginForm.username"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input 
            prefix-icon="iconfont icon-mima"
            v-model="loginForm.password" 
            type="password"
          >
        </el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="loginIn">登录</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {login} from '../../http/api'
export default {
  name: "login",
  data() {
    return {
      //绑定表单数据
      loginForm: {
        username: "admin",
        password: "123456",
      },
      //验证表单规则
      validateRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          { min: 6, max: 25, message: "密码长度在 6到 25 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods:{
     //用户登录
      loginIn() {
        //对表单对整体合法性检验
        this.$refs.loginForm.validate(async valid=>{
          //console.log(valid)
          //如果表单有不合法的字段，直接返回
           if(!valid) return; 
          const res = await login(this.loginForm)
          console.log('await结果：',res)
         //登录成功之后的步骤
         //第一步：存储token
         sessionStorage.setItem('token',res.token)
         //第二步：跳转到home页
        //  this.$router.push('/home')
        //console.log('路由对象：',this.$route)
        let {redirect}=this.$route.query
        if(redirect)  {
          this.$router.push({path:redirect})
        }else {
            this.$router.push({path:'/home'})
        }


        })
      },
      //重置表单
      resetForm() {
       this.$refs.loginForm.resetFields()
      }
  }
};
</script>

<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100%;
  background: #2b4b6b;
  .login_form {
    box-sizing: border-box;
    padding: 80px 30px;
    width: 40%;
    height: 400px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;


  }
}
.top{
              width: 160px;
              height: 160px;
              border: 10px solid #f7f3f3;
              border-radius: 50%;
              background-color: #cecdcd;
              position: absolute;
              top: -90px;
              left: 50%;
              margin-left: -90px;
              img{
                   width: 100%;
                   height: 100%;
                  
                   border-radius: 50%;
              }
        }

.login_form h2 {
  text-align: center;
  line-height: 80px;
  font-weight: 600;
  font-size: 20px;
}

.btns {
  display: flex;
  justify-content: flex-end;
}
</style>